<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbs"
        :key="index"
        v-show="item.meta.title"
        :to="item.name"
        class="flex items-center text-nowrap"
      >
        <template #default>
          <div class="flex items-center gap-1" :class="{'font-bold': index !== breadcrumbs.length - 1}">
            <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
            <span>{{ item.meta.title }}</span>
          </div>
        </template>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

// 获取当前路由信息
const route = useRoute()

// 提取面包屑路径
const breadcrumbs = computed(() => {
  return route.matched.filter(item => item.meta.title)
})
</script>

<style scoped>
/* 可以根据需要自定义面包屑的样式 */
</style>
